<template>
  <!-- 可回收物点站场 -->
  <div class="data-list" v-loading="pageLoading">
    <div class="left-box">
      <div class="title" @click="handleStationClick(null)">所有街道</div>
      <div class="station-list">
        <div
          class="station-item"
          v-for="item in stationList"
          :key="item.id"
          :class="{ active: stationId === item.id }"
          @click="handleStationClick(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="panel">
        <div class="panel-item">
          <div class="title">可停放车辆</div>
          <div class="content">
            <div>
              <span>总数：</span>
              <span class="num">{{ count_1 }}</span>
            </div>
            <div>
              <span>燃油车：</span>
              <span class="num">{{ count_2 }}</span>
            </div>
            <div>
              <span>电车：</span>
              <span class="num">{{ count_3 }}</span>
            </div>
            <div>
              <span>机具：</span>
              <span class="num">{{ count_3 }}</span>
            </div>
          </div>
        </div>
        <div class="panel-item">
          <div class="title">运营单位</div>
          <div class="content">
            <div style="width: 20%">
              <span>一分公司：</span>
              <span class="num">{{ count_4 }}</span>
            </div>
            <div style="width: 20%">
              <span>二分公司：</span>
              <span class="num">{{ count_5 }}</span>
            </div>
            <div style="width: 20%">
              <span>三分公司：</span>
              <span class="num">{{ count_6 }}</span>
            </div>
            <div style="width: 20%">
              <span>桃浦保洁：</span>
              <span class="num">{{ count_7 }}</span>
            </div>
          </div>
        </div>
        <div class="panel-item">
          <div class="title">电车充电情况</div>
          <div class="content">
            <div>
              <span>充电桩个数：</span>
              <span class="num">{{ count_4 }}</span>
            </div>
            <div>
              <span>电车数：</span>
              <span class="num">{{ count_5 }}</span>
            </div>
            <div>
              <span>每月充电车辆数：</span>
              <span class="num">{{ count_6 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 分割线 -->
      <div class="split-line"></div>
      <mTableLayout>
        <template #form>
          <mForm
            :configs="formConfigs"
            :formData="formInline"
            :col="5"
            @search="onSearch"
          >
            <template #ownership_category>
              <el-select
                v-model="formInline.ownership_category"
                clearable
                placeholder="请选择"
              >
                <el-option label="产权-普环" value="产权-普环" />
                <el-option label="租赁" value="租赁" />
                <el-option label="产权-区局" value="产权-区局" />
                <el-option label="其他" value="其他" />
              </el-select>
            </template>
            <template #property_certificate_date>
              <el-date-picker
                v-model="formInline.property_certificate_date"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择"
              />
            </template>
            <template #agreement_period>
              <el-date-picker
                v-model="formInline.agreement_period"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择"
              />
            </template>
            <template #parking_type>
              <el-select
                v-model="formInline.parking_type"
                clearable
                placeholder="请选择"
              >
                <el-option label="绿化" value="绿化" />
                <el-option label="环卫" value="环卫" />
                <el-option label="其它" value="其它" />
              </el-select>
            </template>
            <template #operator_id>
              <el-select
                v-model="formInline.operator_company"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in operatorOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
            <template #repair_workshop>
              <el-select
                v-model="formInline.repair_workshop"
                clearable
                placeholder="请选择"
              >
                <el-option label="有" value="有" />
                <el-option label="无" value="无" />
              </el-select>
            </template>
            <template #vehicle_wash_equipment>
              <el-select
                v-model="formInline.vehicle_wash_equipment"
                clearable
                placeholder="请选择"
              >
                <el-option label="有" value="有" />
                <el-option label="无" value="无" />
              </el-select>
            </template>
            <template #repair_equipment_details>
              <el-select
                v-model="formInline.repair_equipment_details"
                clearable
                placeholder="请选择"
              >
                <el-option label="有" value="有" />
                <el-option label="无" value="无" />
              </el-select>
            </template>
            <template #charging_pile_type>
              <el-select
                v-model="formInline.charging_pile_type"
                clearable
                placeholder="请选择"
              >
                <el-option label="站式" value="站式" />
                <el-option label="坐式" value="坐式" />
              </el-select>
            </template>
            <template #machine_charging_facility>
              <el-select
                v-model="formInline.machine_charging_facility"
                clearable
                placeholder="请选择"
              >
                <el-option label="有" value="有" />
                <el-option label="无" value="无" />
              </el-select>
            </template>
          </mForm>
        </template>
        <template #page-subtitle>
          <el-button
            v-if="isDelete == 1"
            type="danger"
            @click="batchDelete"
            :disabled="selectionData.length === 0"
            icon="Delete"
            >删除</el-button
          >
        </template>
        <template #op-btn>
          <el-button v-if="isExport == 1" @click="batchExport" icon="Download"
            >批量导出</el-button
          >
        </template>
        <template #table>
          <mTable
            ref="mTableRef"
            :tableHeader="tableHeader"
            :tableData="tableData"
            :adapter="tableAjax"
            @selection-change="handleSelectionChange"
          >
            <template #parking_name="{ row }">
              <el-button
                type="primary"
                link
                @click="handleUpdate(row, 'view')"
                >{{ row.parking_name }}</el-button
              >
            </template>
            <template #default="{ row }">
              <img
                v-if="isRecover == 1"
                @click="handleRecover(row.id)"
                src="@/assets/images/icon/recover_icon.png"
                class="update_icon"
              />
              <img
                v-if="isDelete == 1"
                @click="handleDelete(row.id)"
                src="@/assets/images/icon/delete_icon.png"
                class="delete_icon"
              />
            </template>
          </mTable>
        </template>
      </mTableLayout>
    </div>

    <!-- 新增、编辑站点 -->
    <StationDrawer
      ref="stationDrawerRef"
      @refresh="mTableRef.fetchData(true)"
    />
    <!-- 自定义弹框 -->
    <CustomDialog
      ref="customDialogRef"
      @confirm="handleDeleteConfirm"
      @close="handleDialogClose"
    />
    <!-- 导出框 -->
    <ExportDrawer ref="exportDrawerRef" @export="handleExport" />
  </div>
</template>
<script setup>
import { tableHeader, formConfigs } from "./config";
import { ref, onMounted, reactive } from "vue";
import {
  parkingLotsList,
  parkingLotsDelSuccess,
  parkingLotsDetail,
  parkingLotsExport,
  parkingLotsDelRecover
} from "@/api/parking_lots";
import { operatorsList, streetsList } from "@/api/index";
import { ElMessage, ElMessageBox } from "element-plus";
import StationDrawer from "@/views/DataList/parkingLots/components/stationDrawer.vue";
import CustomDialog from "@/components/customDialog.vue";
import ExportDrawer from "@/views/DataList/parkingLots/components/exportDrawer.vue";
import { useAppStore } from "@/stores/app.js";
import AsyncImport from "@/components/asyncImport.vue";
defineOptions({
  name: "GarbageStation",
});
const stationList = ref(null);
const operatorOptions = ref(null);
const stationId = ref(null);
const stationDrawerRef = ref(null); // 站点抽屉引用
const customDialogRef = ref(null); // 自定义弹框引用
const exportDrawerRef = ref(null); // 导出框引用
const appStore = useAppStore();
const isCreate = ref(null);
const isRecover = ref(null);
const isDelete = ref(null);
const isEdit = ref(null);
const isImport = ref(null);
const isExport = ref(null);
const pageLoading = ref(false);
const formInline = reactive({
  street_id: "",
  ownership_category: "",
  property_certificate_date: "",
  agreement_period: "",
  parking_type: "",
  operator_id: "",
  repair_workshop: "",
  vehicle_wash_equipment: "",
  repair_equipment_details: "",
  charging_pile_type: "",
  machine_charging_facility: "",
});

const onSearch = (data) => {
  console.log(data.value);
  mTableRef.value.fetchData(true);
};
const count_1 = ref(0);
const count_2 = ref(0);
const count_3 = ref(0);
const count_4 = ref(0);
const count_5 = ref(0);
const count_6 = ref(0);
const count_7 = ref(0);
const count_8 = ref(0);
const count_9 = ref(0);
const count_10 = ref(0);
const mTableRef = ref(null);
const total = ref(0);
const deleteIds = ref(""); // 删除ID
const selectionData = ref([]);

const tableData = ref([]);
onMounted(() => {
  streetsList({}).then((res) => {
    if (res.code == 0) {
      stationList.value = res.data || [];
    }
  });
  operatorsList({ project_id: 3 }).then((res) => {
    if (res.code == 0) {
      operatorOptions.value = res.data || [];
    }
  });

  if (appStore.userInfo?.roles?.history_site?.indexOf("delete") >= 0) {
    isDelete.value = 1;
  } else {
    isDelete.value = 0;
  }

  if (appStore.userInfo?.roles?.history_site?.indexOf("recover") >= 0) {
    isRecover.value = 1;
  } else {
    isRecover.value = 0;
  }

  if (appStore.userInfo?.roles?.history_site?.indexOf("export") >= 0) {
    isExport.value = 1;
  } else {
    isExport.value = 0;
  }

  mTableRef.value.fetchData(true);
});

const handleImportSuccess = (response, file, fileList) => {
  if (response.code == 0) {
    mTableRef.value.fetchData(true);
    ElMessage.success("导入成功");
  } else {
    ElMessage.error(response.msg);
  }
  pageLoading.value = false;
};

const handleStationClick = (item) => {
  if (item) {
    stationId.value = item.id;
    formInline.street_id = item.id;
    console.log(item, "item");
    mTableRef.value.fetchData(true);
  } else {
    stationId.value = null;
    formInline.street_id = null;
    mTableRef.value.fetchData(true);
  }
};

// 列表请求
const tableAjax = async ({ pageSize, currentPage }) => {
  let o = {
    pageSize,
    deleted_flag: 1,
    page: currentPage,
    ...formInline,
  };
  let res = await parkingLotsList(o);
  console.log(res, "res");
  if (res.code == 0) {
    tableData.value = res.data;
    total.value = res.count || 0;

    count_1.value = res.count_1 || 0;
    count_2.value = res.count_2 || 0;
    count_3.value = res.count_3 || 0;
    count_4.value = res.count_4 || 0;
    count_5.value = res.count_5 || 0;
    count_6.value = res.count_6 || 0;
    count_7.value = res.count_3 || 0;
    count_8.value = res.count_4 || 0;
    count_9.value = res.count_5 || 0;
    count_10.value = res.count_6 || 0;
  }
  return {
    data: res.data,
    total: res.count || 0,
  };
};

const handleUpdate = (row) => {
  console.log(row, "当前行");
  if (row) {
    parkingLotsDetail({ id: row.id }).then((res) => {
      if (res.code == 0) {
        stationDrawerRef.value.openDrawer(res.data, "view");
      }
    });
  } else {
    stationDrawerRef.value.openDrawer(null, "add");
  }
};

const batchImport = () => {
  console.log("批量导入");
};

const batchExport = () => {
  exportDrawerRef.value.openDrawer();
};

// 处理导出
const handleExport = (data) => {
  let o = {
    streetId: data.streetId,
    columns: data.columns,
  };
  // 在这里调用导出接口
  console.log(o, "data - 导出参数");
  parkingLotsExport(o).then((res) => {
    if (res.code == 0) {
      exportDrawerRef.value.openDrawer();
      window.location.href = res.data.path;
    }
  });
};

const batchDelete = () => {
  handleDelete(selectionData.value.map((item) => item.id).join(","));
};

// 批量+单个处理删除
const handleDelete = (ids) => {
  deleteIds.value = ids;
  customDialogRef.value.openDialog("del");
};

// 执行删除逻辑
const handleDeleteConfirm = () => {
  console.log("执行删除逻辑");
  parkingLotsDelSuccess({ id: deleteIds.value }).then((res) => {
    if (res.code == 0) {
      customDialogRef.value.openDialog("del_res");
    }
  });
};

// 处理弹框关闭事件
const handleDialogClose = () => {
  // 刷新列表数据
  mTableRef.value.fetchData(true);
};


const handleRecover = (ids) => {
  ElMessageBox.confirm("确定恢复吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    parkingLotsDelRecover({ id: ids }).then((res) => {
      if (res.code == 0) {
        mTableRef.value.fetchData(true);
        ElMessage.success("恢复成功");
      }
    });
  });
};


// 页面上勾选的数据选择
const handleSelectionChange = (val) => {
  selectionData.value = val;
};
</script>
<style scoped lang="scss">
@use "./index.scss";
:deep(.demo-form-inline) {
  .el-input,
  .el-select {
    width: 220px;
  }
}
</style>
